<!--  -->
<template>
    <div class="page-container">
        <div class="header-panel">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
                <el-form-item label="测站">
                    <StbprpSelect v-model="queryParams.stcd" placeholder="请选择测站"></StbprpSelect>
                </el-form-item>

                <el-form-item label="卡号" prop="phonenumber">
                    <el-input v-model="queryParams.cardid" placeholder="请输入卡号" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table v-loading="loading" :data="stbprpList" size="medium" height="calc(100% - 100px)">
            <el-table-column label="测站编码" align="center" prop="stcd" />
            <el-table-column label="测站名称" align="center" prop="stnm" />
            <el-table-column label="河流名称" align="center" prop="rvnm" />
            <el-table-column label="水系名称" align="center" prop="hnnm" />
            <el-table-column label="流域名称" align="center" prop="bsnm" />
            <el-table-column label="经度" align="center" prop="lgtd" />
            <el-table-column label="纬度" align="center" prop="lttd" />
            <el-table-column label="站址" align="center" prop="stlc" :show-overflow-tooltip="true"/>
            <el-table-column label="卡号" align="center" prop="cardid" />
            <el-table-column label="检测要素" align="center" prop="basis" />
        </el-table>
    </div>
</template>

<script>
import StbprpSelect from '@/components/Select/StbprpSelect'
export default {
    components: {StbprpSelect},
    data() {
        return {
            queryParams: {},
            // 遮罩层
            loading: true,
            stbprpList: []
        }
    },
    computed: {},
    created() {
        this.getList();
    },
    mounted() { },
    methods: {
        handleQuery() {
            this.getList();
        },
        /** 查询测站列表 */
        getList() {
            this.loading = true;
            this.$request({
                url: '/baseApi/st_stbprp_b/list',
                method: 'get',
                params: {
                    ...this.queryParams
                }
            }).then((res) => {
                if (res.code === 200) {
                    this.loading = false;
                    this.stbprpList = res.data;
                }
            })
        },
    },
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类样式</style>